<!--
 * @Date: 2022-06-30 14:19:46
 * @LastEditTime: 2022-07-13 23:00:19
-->
<template>
<div class="displayItem" v-if="videoDetail != null">
  <div class="top-img">
    <router-link :to="{path: '/movie/' + videoDetail.id}"><img width="120px" height="167.52px" :src="movieUrl + videoDetail.id + '.jpg'" alt="" /></router-link>
  </div>
  <div class="videoname">
    <router-link :to="{path: '/movie/' + videoDetail.id}">{{videoDetail.movie_name}}</router-link>
  <span class="score">{{videoDetail.movie_score}}</span>
  </div>
</div>
</template>

<script>
import { getAverageStar } from '@/helper'

export default {
  props: ['videoDetail'],
  computed: {
    getAverStar: function () {
      // console.log(this.videoDetail)
      return getAverageStar(this.videoDetail.stars)
    }
  },
  data () {
    return {
      movieUrl: this.picbed + '/poster/'
    }
  }
}
</script>

<style>
.displayItem{
  display: inline-block;
}
.top-img{
  display: flex;
  justify-content: space-around;
}
.videoname{
  width:120px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  float: left;
  padding-top: 1%;
  padding-left: 1%;
  padding-right: 1%;
  align-content: center;
}
.score{
  color: rgb(224, 144, 21);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 13px;
  text-align: center;
  padding-left: 1%;
  white-space: nowrap;
}
</style>
